<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <img class="logo" src="@/assets/logo.png" alt="" />
      </template>
      <template #right>
        <van-button @click="$router.push('/search')" class="search-btn" round type="primary" icon="search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <!-- 新闻列表 -->
        <article-list :channel_id="item.id" />
      </van-tab>

      <div class="icon-box">
        <van-icon @click="$refs.chEdit.show = true" size="30" name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 频道管理的sheet -->
    <!-- $event用在原生标签是事件对象，用在组件是子传递过来的参数 -->
    <!-- 此时这个组件跟active双向绑定了 -->
    <!-- <channel-edit
      :ownList="ownList"
      :allList="allList"
      :value="active"
      @input="active = $event"
      ref="chEdit"
    ></channel-edit> -->

    <!--
      v-model其实是一个语法糖
        少量代码，最终生成多句代码
      v-model="数据"
        会帮我们生成 :value="数据" 以及 @input="数据 = $event"
      所以 v-model="active"
        会生成      :value="active"  以及  @input="active = $event"
    -->
    <channel-edit
      :ownList="ownList"
      :allList="allList"
      v-model="active"
      ref="chEdit"
      @add="ownList.push($event)"
      @del="del"
    ></channel-edit>
  </div>
</template>

<script>
// 导入接口
import { ownChannelAPI, allChannelAPI, saveChannelAPI } from '@/api/channel'
// 导入组件
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './components/ChannelEdit.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      // 自己频道数组
      ownList: [],
      // 所有频道的数组
      allList: [],
      isFirst: true
    }
  },
  async created () {
    /*
    if (this.$store.state.user.tokenObj.token) {
      // 发请求获取我的频道
      const res1 = await ownChannelAPI()
      this.ownList = res1.data.channels
    } else {
      // 没登录 - 获取本地存储
      const local = JSON.parse(localStorage.getItem('channel100'))
      if (local) {
        this.ownList = local
      } else {
        // 没有就发请求
        const res1 = await ownChannelAPI()
        this.ownList = res1.data.channels
      }
    }
    */

    // 获取本地存储
    const local = JSON.parse(localStorage.getItem('channel100'))
    if (this.$store.state.user.tokenObj.token || !local) {
      // 发请求
      const res1 = await ownChannelAPI()
      this.ownList = res1.data.channels
    } else {
      // 从本地存储取
      this.ownList = local
    }

    // 发请求获取所有频道
    const res2 = await allChannelAPI()
    this.allList = res2.data.channels
  },
  methods: {
    del (index) {
      // 如果删的是前面，则让高亮下标-1
      if (index < this.active) {
        this.active--
      }
      // 删元素
      this.ownList.splice(index, 1)
    }
  },

  watch: {
    async ownList () {
      if (this.isFirst) {
        this.isFirst = false
        return
      }
      // 做持久化
      if (this.$store.state.user.tokenObj.token) {
        // 登录就发请求
        // const res = await saveChannelAPI({
        //   channels: this.ownList.map((v, i) => ({ id: v.id, seq: i }))
        // })

        // 因为服务器要的是数组，数组里的对象必须是id和seq，而我们的ownList不满足
        // 所以用ownList映射一个新的数组，再传递给服务器
        const channels = this.ownList.map((v, i) => {
          return { id: v.id, seq: i }
        })

        await saveChannelAPI({
          channels
        })
      } else {
        // 没登录存到本地
        localStorage.setItem('channel100', JSON.stringify(this.ownList))
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  .logo {
    width: 120px;
  }
  .search-btn {
    width: 100px;
    height: 30px;
    background-color: #5aabfb;
    border: none;

    .van-button__icon {
      color: #fff;
    }
  }
}

.van-tabs {
  ::v-deep .van-tabs__wrap {
    width: 345px;
  }

  .icon-box {
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 5px;
  }
}
</style>
